
<el-tab-pane label="套装裤" name="second">
<p class="print-icon">
  <vxe-button status="success" icon="vxe-icon-print" circle @click="open('.image-back-1')"></vxe-button>
</p>
<div class="image-back-1">
  <div style="width: 100%;height: 35px"></div>
  <div class="table-item">

  </div>
</div>
</el-tab-pane>
<el-tab-pane label="连衣裙" name="third">
<p class="print-icon">
  <vxe-button status="success" icon="vxe-icon-print" circle @click="open('.image-back-2')"></vxe-button>
</p>
<div class="image-back-2">
  <div style="width: 100%;height: 35px"></div>
  <div class="table-item">
  </div>
</div>
</el-tab-pane>
<el-tab-pane label="上衣" name="four">
<p class="print-icon">
  <vxe-button status="success" icon="vxe-icon-print" circle @click="open('.image-back-3')"></vxe-button>
</p>
<div class="image-back-3">
  <div style="width: 100%;height: 35px"></div>
  <div class="table-item">
  </div>
</div>
</el-tab-pane>
<el-tab-pane label="下装（裙）" name="five">
<p class="print-icon">
  <vxe-button status="success" icon="vxe-icon-print" circle @click="open('.image-back-4')"></vxe-button>
</p>
<div class="image-back-4">
  <div style="width: 100%;height: 35px"></div>
  <div class="table-item">
  </div>
</div>
</el-tab-pane>
<el-tab-pane label="下装（裤）" name="six">
<p class="print-icon">
  <vxe-button status="success" icon="vxe-icon-print" circle @click="open('.image-back-5')"></vxe-button>
</p>
<div class="image-back-5">
  <div style="width: 100%;height: 35px"></div>
  <div class="table-item">
    <vxe-grid v-bind="gridOptions_kz" @edit-disabled="editDisabledEvent" auto-resize
              header-cell-class-name="table-item-header" align="center" v-on="gridEvents"
    >
      <template>
        <vxe-input v-model="row.cm" align="center"></vxe-input>
      </template>
      <template #kz_kc_edit="{ row }">
        <vxe-input v-model.number="row.kc" @change="kz_kc_edit(row)" align="center"></vxe-input>
      </template>
      <template #kz_yw_edit="{ row }">
        <vxe-input v-model.number="row.yw" @change="kz_yw_edit(row)" align="center"></vxe-input>
      </template>
      <template #kz_tw_edit="{ row }">
        <vxe-input v-model.number="row.tw" @change="kz_tw_edit(row)" align="center"></vxe-input>
      </template>
    </vxe-grid>
  </div>
</div>
</el-tab-pane>
<el-tab-pane label="连体裤" name="seven">
<p class="print-icon">
  <vxe-button status="success" icon="vxe-icon-print" circle @click="open('.image-back-6')"></vxe-button>
</p>
<div class="image-back-6">
  <div class="table-item">
  </div>
</div>
</el-tab-pane>



const gridOptions_kz = reactive({
border: false,
showOverflow: true,
rowConfig: {
height: '52px'
},
editConfig: {
trigger: 'click',
mode: 'row',
showIcon: false,
beforeEditMethod({rowIndex}) {
if (rowIndex === 1) {
return true
}
return false
}
},
columns: [
{field: 'cm', title: '尺码', editRender: {}, slots: {edit: 'cm_edit'}},
{field: 'kc', title: '裤长', editRender: {}, slots: {edit: 'kz_kc_edit'}},
{field: 'yw', title: '腰围', editRender: {}, slots: {edit: 'kz_yw_edit'}},
{field: 'tw', title: '臀围', editRender: {}, slots: {edit: 'kz_tw_edit'}}
],

data: [
{
id: 10001,
cm: 'XS',
kc: '',
yw: '',
tw: ''
},
{
id: 10002,
cm: 'S',
kc: '0',
yw: '0',
tw: '0'
}, {
id: 10003,
cm: 'M',
kc: '',
yw: '',
tw: ''
}, {
id: 10004,
cm: 'L',
kc: '',
yw: '',
tw: ''
}, {
id: 10005,
cm: 'XL',
kc: '',
yw: '',
tw: ''
}, {
id: 10006,
cm: 'XXL',
kc: '',
yw: '',
tw: ''
}
]
})

const kz_kc_edit = (rows) => {
const kc = rows.kc;
gridOptions_kz.data[0].kc = kc
gridOptions_kz.data[2].kc = kc
gridOptions_kz.data[3].kc = kc
gridOptions_kz.data[4].kc = kc
gridOptions_kz.data[5].kc = kc
}

const kz_yw_edit = (rows) => {
const yw = rows.yw;
const step = 4;
gridOptions_kz.data[0].yw = yw - step
gridOptions_kz.data[2].yw = yw + step
gridOptions_kz.data[3].yw = yw + step * 2
gridOptions_kz.data[4].yw = yw + step * 3
gridOptions_kz.data[5].yw = yw + step * 4
}

const kz_tw_edit = (rows) => {
const tw = rows.tw;
const step = 4
gridOptions_kz.data[0].tw = tw - step
gridOptions_kz.data[2].tw = tw + step
gridOptions_kz.data[3].tw = tw + step * 2
gridOptions_kz.data[4].tw = tw + step * 3
gridOptions_kz.data[5].tw = tw + step * 4
}